<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            用户名:
            <input type="text" id="username" v-model='name'>
            <br> 密码:
            <input type="password" id="password" v-model='psw'>
            <br>
            <span style="color: red">{{res}}</span>
            <button @click='handle'>登录</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 需求: 点击按钮, 要得到用户在输入框输入的用户名和密码,如果用户名和密码是zhangsan和123456, 则在span标签内部显示: 登录成功, 否则显示用户名或者密码错误
        // 思考, 双向数据绑定的用途究竟是什么?
        var vm = new Vue({
            el: '#app ',
            data: {
                name: '',
                psw: '',
                res: ''
            },
            methods: {
                handle: function() {
                    if (this.name == 'zhangsan' && this.psw == '123456') {
                        this.res = '登录成功 '
                    } else {
                        this.res = '用户名或密码错误 '
                    }
                }
            }
        })
    </script>
</body>

</html>